<template>
<div class="img-his-cp">
    <div class="more-bt">
        <i class="el-icon-time"></i>
    </div>
    <div
        v-show="moreShow || true"
        class="more-container"
        ref="MoreContainer">
        <div 
            class="item"
            v-for="(item,index) in 10"
            :key="index">
            <el-image
                class="image"
                style="width: 40px; height: 40px"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                fit="cover">
            </el-image>
            <div class="delete-bt">
                <i class="el-icon-delete"></i>
            </div>
        </div>
    </div>
</div>
</template>

<script>
/*
 头部组件
 */
export default {
    name: 'Head',
    data() {
        return {
            optionList:[
                {
                    title:'政策查询',
                    path:'/123',
                    name:'policy',
                },
                {
                    title:'政策查询',
                    path:'/123',
                },
                {
                    title:'政策查询',
                    path:'/123',
                },
                {
                    title:'政策查询',
                    path:'/123',
                },
                {
                    title:'政策查询',
                    path:'/123',
                },
            ],
            moreShow:false,
        };
    },
    mounted(){
        this.initEvent();
    },
    methods: {
        initEvent(){
            let moreShowBt = this.$refs.MoreShowBt;
            let MoreContainer = this.$refs.MoreContainer;
            document.addEventListener('click', e => {  //判断点击事件的包含关系
                e = e || window.event;
                //如果点击事件不在容器上和点击按钮上则隐藏容器
                if (!moreShowBt.contains(e.target) && !MoreContainer.contains(e.target)) {
                    this.moreShow = false;
                }
            });
        },
        onMore(){
            this.moreShow = !this.moreShow;
        },
        toPath(){
            this.$router.push({ 
                path:'/'
            });
        },
    }
}
</script>

<style scoped lang="scss">
.img-his-cp{
    --my-width:40px;
    --my-height:40px;
    background-color: rgb(225, 225, 225);
    width: var(--my-width);
    height: var(--my-height);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    >.more-bt{
        font-size: 25px;
        color: rgb(77, 77, 77);
        cursor: pointer;
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }
    >.more-container{
        width: 150px;
        max-height: 100px;
        border-radius: 12px;
        overflow: auto;
        display: grid;
        grid-gap: 5px;
        position: absolute;
        top: 0px;
        left: calc(100% + 5px);
        background-color: rgb(220, 220, 220);
        padding: 5px 0;
        box-sizing: border-box;
        >.item{
            padding: 0px 5px;
            display: grid;
            grid-template-columns: min-content 1fr;
            &:hover{
                background-color: rgb(242, 242, 242);
            }
            >.image{
                border-radius: 12px;
            }
            >.delete-bt{
                cursor: pointer;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                font-size: 20px;
            }
        }
    }
}
</style>
